<template>
	<view class="container">
		<view class="table-container">
			<view class="top_title">
				<text>详情查看</text>
				<text>班级选择</text>
			</view>
			<view class="detail">
				<uni-table>
					<uni-tr>
						<uni-th width="100rpx" align="center">排名</uni-th>
						<uni-th width="100rpx" align="center">姓名</uni-th>
						<uni-th width="100rpx" align="center">性别</uni-th>
						<uni-th width="100rpx" align="center">成绩</uni-th>
						<uni-th width="100rpx" align="center">详细</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{ item.rank }}</uni-td>
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">
							<view>{{ item.sex }}</view>
						</uni-td>
						<uni-td align="center">{{ item.chengji }}</uni-td>
						<uni-td align="center"><text @click="clickDetail(item)">查看</text> </uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData:[{
					rank:1,
					name:'张三',
					sex:'男',
					chengji:'100',
				},{
					rank:2,
					name:'李四',
					sex:'女',
					chengji:'95',
				},{
					rank:3,
					name:'王五',
					sex:'女',
					chengji:'95',
				},{
					rank:4,
					name:'赵六',
					sex:'男',
					chengji:'80',
				}]
			}
		},
		// 注册组件
		components: {

		},
		methods: {
			clickDetail(e) {
				this.$tab.navigateTo('/pages/work/datacenter/studentDetail?id=' + e.id)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #6E89BE;
	}

	.container {
		width: calc(100vw - 40rpx);
		height: auto;
		margin: 0 auto;

		.table-container {
			.detail {
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 50rpx 40rpx;

				.uni-table {
					color: #fff;

					.uni-table-tr {
						background-color: #FFB783;

						.uni-table-td {
							color: #fff !important;
							padding: 10rpx !important;
							border-bottom: 14rpx #fff solid !important;
						}

						.uni-table-th {
							color: #fff !important;
							border-bottom: 14rpx #fff solid !important;
						}
					}

					.uni-table-tr:nth-child(1) {
						background-color: #FFAE73;
					}
				}
			}
		}
	}

	.top_title {
		color: $uni-text-color-inverse;
		display: flex;
		line-height: 70rpx;
		padding: 10rpx 20rpx;
		align-items: center;
		justify-content: space-between;
		text {

		}
	}
</style>
